<template>
  <div class="webDiary">
    <div class="date-box">
      <p>
        {{ timeObj.year }}年{{ timeObj.month }}月{{ timeObj.day }}日<span
          >星期{{ timeObj.weekend }}</span
        >
      </p>
    </div>
    <div class="text-box">
      <textarea v-model="diaryContent" placeholder="点击输入"></textarea>
    </div>
    <div class="btn-box">
      <button @click="writeOk">写好了</button>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "webDiary",
  data() {
    return {
      diaryContent: "",
    };
  },
  methods: {
    writeOk() {
      if (this.diaryContent.length == 0) {
        alert("您还没写日记呢");
        return false;
      } else {
        let dt = new Date();
        let month = dt.getMonth() + 1;
        let dd = dt.getDate();
        let hh = dt.getHours();
        let mm = dt.getMinutes();
        hh = hh < 10 ? "0" + hh : hh;
        mm = mm < 10 ? "0" + mm : mm;
        let id = Math.random();
        let obj = { content: this.diaryContent, time: hh + ":" + mm, id: id };

        // 加入到当天数组
        this.$store.state.todayArray.unshift(obj);

        // 改变月份文本
        if (month == 1) {
          month = "一";
        } else if (month == 2) {
          month = "二";
        } else if (month == 3) {
          month = "三";
        } else if (month == 4) {
          month = "四";
        } else if (month == 5) {
          month = "五";
        } else if (month == 6) {
          month = "六";
        } else if (month == 7) {
          month = "七";
        } else if (month == 8) {
          month = "八";
        } else if (month == 9) {
          month = "九";
        } else if (month == 10) {
          month = "十";
        } else if (month == 11) {
          month = "十一";
        } else if (month == 12) {
          month = "十二";
        }

        let newArray = [];
        let option = {
          month: month,
          day: dd,
          content: this.diaryContent,
          time: hh + ":" + mm,
          id: id,
        };
        // 加入到总的数组
        let arr = this.$store.state.bigDiaryArray;
        let len = arr.length;
        // console.log(arr);
        if (len == 0) {
          newArray.unshift(option);
          this.$store.state.bigDiaryArray.push(newArray);
        } else {
          for (let i = 0; i < len; i++) {
            if (
              option.month == arr[i][0].month &&
              option.day == arr[i][0].day
            ) {
              this.$store.state.bigDiaryArray[i].unshift(option);
              // console.log( option.day);
              break;
              // console.log("日期相同");
            } else {
              if (
                option.month == arr[i][0].month &&
                option.day > arr[i][0].day
              ) {
                newArray.unshift(option);
                this.$store.state.bigDiaryArray.unshift(newArray);
                // console.log("大于");
                break;
              } else {
                newArray.unshift(option);
                this.$store.state.bigDiaryArray.push(newArray);
                // console.log("小于");
                break;
              }
            }
          }
        }

        // console.log(newArray);
        // console.log(this.$store.state.bigDiaryArray);
        alert("发表成功");
        this.diaryContent = "";
        this.$router.push({ path: "/home/myhomepage" });
        //   console.log(this.diaryContent);
      }
    },
  },
  mounted() {},
  computed: {
    ...mapState(["timeObj"]),
  },
};
</script>

<style lang="less" scoped>
.webDiary {
  width: 100%;
  .date-box {
    height: 45px;
    line-height: 45px;
    p {
      color: #808080;
      font-size: 16px;
      font-weight: bold;
      span {
        margin-left: 20px;
      }
    }
  }
  .text-box {
    textarea {
      width: 470px;
      height: 360px;
      padding: 10px 10px;
      box-sizing: border-box;
      resize: none;
      font-size: 16px;
      outline-color: burlywood;
      border-radius: 10px;
    }
  }
  .btn-box {
    margin-bottom: -15px;
    padding-top: 22px;
    box-sizing: border-box;
    button {
      font-size: 16px;
      padding: 5px 15px;
      border: 1px solid #ccc;
      border-radius: 5px;
      cursor: pointer;
    }
  }
}
</style>